<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main" style="width: 600px;height: 500px;"></div>
</template>
<script>
    export default {
      
        name: '',
        data () {
            return {
                charts: '',
                opinion:[],//'直接访问','邮件营销','联盟广告','视频广告','搜索引擎','其他'
                opinionData:[]
                  // {value:335, name:'直接访问'},
                  // {value:310, name:'邮件营销'},
                  // {value:234, name:'联盟广告'},
                  // {value:135, name:'视频广告'},
                  // {value:1548, name:'搜索引擎'},
                  // {value:118, name:'其他'}
                
            }
        },
        methods:{
            drawPie(id){
               this.charts = this.$echarts.init(document.getElementById(id))
               this.charts.setOption({
                 tooltip: {
                   trigger: 'item',
                   formatter: '{a}<br/>{b}:{c} ({d}%)'
                 },
                 legend: {
                   orient: 'vertical',
                   x: 'left',
                   data:this.opinion
                 },
                 
                 series: [
                   {
                     name:'访问来源',
                     type:'pie',
                     radius:['50%','70%'],
                     avoidLabelOverlap: false,
                     label: {
                       normal: {
                         show: false,
                         position: 'center'
                       },
                       emphasis: {
                         show: true,
                         textStyle: {
                           fontSize: '30',
                           fontWeight: 'blod'
                         }
                       }
                     },
                     labelLine: {
                       normal: {
                         show: true
                       }
                     },
                     data:this.opinionData
                   }
                 ]
               })
               
            },
          myrequest(){
       this.$http.get('http://localhost:9527/option')
  .then(response => {
    console.log(response);
     console.log(response.data) 
     this.opinionData=response.data
     var list = response.data
     Object.keys(list).forEach(key =>{
       console.log(key,list[key].name)
       this.opinion[key]=list[key].name
       this.opinionData[key]=list[key]
     })
    console.log("this.opinionData="+this.opinionData)
    console.log("this.opinionData="+this.opinion)
    this.$nextTick(function() {
                this.drawPie('main')
            });  
  })
  .catch(function (error) {
    console.log(error);
  });
  
    }
        },
      //调用
        mounted(){   
            
            
           
        },
        created() {
        this.myrequest();    
            
            console.log("內部============="+this.opinionData)  

},
    }
</script>
<style>
    
</style>